<template>
  <div style="width: 100%;height: 100%">
    <el-page-header @back="goBack" content="问卷数据页面" style="margin-left: 10px;">
    </el-page-header>
    <el-button type="success" style="width: 200px;position: absolute;right: 10px" @click="download()">下载数据</el-button>
    <router-link :to="{name:'dataView',params:{id:this.$route.params.id}}">
      <el-button type="success" style="width: 200px;position: absolute;right: 10px;margin-top: 60px"
                 @click="openData()">查看问卷数据图表
      </el-button>
    </router-link>
    <el-card v-for="(item,index) in  this.paperData" :key="index" style="width: 60%;margin: 0 auto">

      <span>{{ index + 1 + '. ' + item.topicTitle }}</span>
      <!--显示表格:-->
      <div v-if="item.topicType=='0'">
        <el-table
            :data="item.data"
            stripe
            style="width: 100%"
            height="250"
        >
          <el-table-column
              prop="id"
              label="ID"
              width="180">
          </el-table-column>
          <el-table-column
              prop="replayText"
              label="回答"
              width="180"
          >
          </el-table-column>
          <el-table-column
              prop="age"
              label="年龄"
          >
          </el-table-column>
          <el-table-column
              prop="sex"
              label="性别"
          >
          </el-table-column>
          <el-table-column
              prop="createTime"
              label="回复日期"
          >
            <template scope="scope">
              {{ scope.row.createTime.substring(0, 10) }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--如果是选择题,就展示数据-->
      <div v-if="item.topicType!='0'">
        <div v-for="(answer,index2) in item.data" :key="index2">
          <span>{{ index2 + 1 + '.' + answer.title }}</span>
          <el-progress :text-inside="true"
                       :stroke-width="24"
                       :percentage="getPercent(answer.selected,item.selectTotal)"
                       status="success"
                       style="width: 400px;margin-top: 1%"
          ></el-progress>
          <br>
        </div>

      </div>
    </el-card>
    <!--    显示侧边栏数据-->
    <el-drawer title="问卷数据"
               :visible.sync="drawer"
               @close="closeView()"
               size="50%"
    >
      <router-view></router-view>
    </el-drawer>
  </div>
</template>
<script>
import axios from "axios";

export default {
  name: "paperData",
  data() {
    return {
      drawer: false,
      innerDrawer: false,
      /*以上抽屉*/
      paperData: [],
      responseData: []
    }
  },

  methods: {
    closeView() {
      this.$router.go(-1);
    },
    openData() {
      this.drawer = true;
    },
    handleClose(done) {
      this.$confirm('还有未保存的工作哦确定关闭吗？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          })
    },
    getPercent(selected, selectTotal) {
      if (selected == 0) {
        return 0;
      }
      let number = parseFloat((parseInt(selected) / parseInt(selectTotal) * 100).toFixed(2));
      return number;
    }
    ,

    download() {
      axios({
        url: 'file/excel/' + this.$route.params.id,
        method: 'get',
        responseType: 'blob'     //接收类型设置，否者返回字符型
      }).then(res => {           //定义文件名等相关信息
        const blob = res
        const reader = new FileReader()
        reader.readAsDataURL(blob)
        reader.onload = (e) => {
          const a = document.createElement('a')
          a.download = `data.zip`
          a.href = e.target.result
          document.body.appendChild(a)
          a.click()
          document.body.removeChild(a)
        }
      })
    }
    ,
    goBack() {
      console.log('go back');
      this.$router.go(-1)
    }
    ,
    getData() {
      this.$http.get("question/paperData/" + this.$route.params.id).then(resp => {
        if (resp.flag = true) {
          this.paperData = resp.data;
          console.log(this.paperData);
        }
      })
    }
  },
  created() {
    this.getData();
  }
}
</script>
<style scoped>
</style>